import { Button } from 'antd';
import { SvgIcon } from '@/components/icon';
import { useRouter } from '@/router/hooks';
import './Back.css';
import { useWorkBench } from '@/store/configStore';
import { CloseOutlined } from '@ant-design/icons';
import TipsModals from '@/components/modals/TipsModals';
import { useState } from 'react';

type Props = {
  title?: string;
  size?: number;
  confirmMessage?: string;
  onBack?: () => void;
  isPreview?: boolean;
  onOk?: () => void;
};

export default function Back({ title, size, confirmMessage, onBack, isPreview, onOk }: Props) {
  const router = useRouter();
  const workbench = useWorkBench();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const titleStyle: React.CSSProperties = {
    fontSize: '14px',
    fontWeight: 400,
    color: '#6C7180',
  };

  const handleBack = () => {
    if (confirmMessage && !isPreview) {
      setIsModalOpen(true);
    } else {
      console.log('onBack');
      onBack && onBack();
    }
  };

  const handleModalOk = () => {
    console.log('onOk');
    onOk && onOk();
    onBack && onBack();
    setIsModalOpen(false);
  };

  const handleModalCancel = () => {
    console.log('onCancel');
    onBack && onBack();
    setIsModalOpen(false);
  };

  return (
    <>
      <div className="justify-left flex items-center">
        <Button type="text" onClick={handleBack} className='!p-[6px]'>
          {/* <SvgIcon icon="ai-chat-back" color="#6C7180" size={size ?? 20} /> */}
          <SvgIcon icon="arrow-left" color="#4E5969" size={size ?? 20} />
        </Button>
        <span style={titleStyle} onClick={handleBack} className='cursor-pointer'>{title}</span>
      </div>

      <TipsModals
        title={null}
        open={isModalOpen}
        children={confirmMessage}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        okText="保存并返回"
        cancelText="不保存返回"
        closeIcon={
          <div onClick={(e) => {
            e.stopPropagation();
            setIsModalOpen(false);
          }}>
            <CloseOutlined style={{ fontSize: '16px', color: '#6C7180' }} />
          </div>
        }
      >
      </TipsModals>
    </>
  );
}
